import {
  DrawerForm,
  ProCard,
  ProForm,
  ProFormList,
  ProFormSelect,
} from '@ant-design/pro-components';
import { useNode } from '@craftjs/core';
import { type IBaseFormProps } from '@jeoshi-design/rex-design.data-entry.core';
import { Button, Collapse, Tabs, Typography } from 'antd';
import { useEffect, useState } from 'react';
import { Checkbox } from './components/checkbox';
import { DateRange } from './components/date-range';
import { Input } from './components/input';
import { Radio } from './components/radio';
import { Select } from './components/select';
import { Switch } from './components/switch';
import { Textarea } from './components/textarea';
import { TreeSelect } from './components/tree-select';

const FieldItem: React.FC<{ action: any }> = ({ action }) => {
  const [valueType, setValueType] = useState('');
  const rowData = action.getCurrentRowData();

  const options = [
    {
      label: '文本框',
      value: 'input',
    },
    {
      label: '文本域',
      value: 'textArea',
    },
    {
      label: '下拉框',
      value: 'select',
    },
    {
      label: '复选框',
      value: 'checkbox',
    },
    {
      label: '单选框',
      value: 'radioGroup',
    },
    {
      label: '日期范围选择器',
      value: 'dateRange',
    },
    {
      label: '树形选择框',
      value: 'treeSelect',
    },
  ];

  const componentConfig: Record<string, () => JSX.Element> = {
    input: () => <Input />,
    select: () => <Select />,
    textArea: () => <Textarea />,
    checkbox: () => <Checkbox />,
    radioGroup: () => <Radio />,
    switch: () => <Switch />,
    treeSelect: () => <TreeSelect />,
    dateRange: () => <DateRange />,
  };

  useEffect(() => {
    if (rowData.valueType) {
      setValueType(rowData.valueType);
    }
  }, [rowData]);

  return (
    <>
      <ProFormSelect
        name={'valueType'}
        label="选择类型"
        options={options}
        onChange={(v) => setValueType(v as string)}
      />
      {componentConfig[valueType]?.()}
    </>
  );
};

export const Settings = () => {
  const {
    actions: { setProp },
    fields = [],
  } = useNode<IBaseFormProps>((node) => ({
    ...node.data.props,
  }));

  return (
    <>
      <Typography.Title level={3}>Pro Form Settings</Typography.Title>
      <Tabs type="card">
        <Tabs.TabPane key={'1'} tabKey="1" tab="通用设置">
          <Collapse defaultActiveKey={['1', '2']}>
            <Collapse.Panel key={'1'} header="字段配置">
              <DrawerForm
                trigger={<Button type="text">编辑</Button>}
                submitter={false}
              >
                <ProForm
                  initialValues={{ fields }}
                  onFinish={(values) => {
                    console.log(values, 'values');
                    setProp(
                      (props: IBaseFormProps) => (props.fields = values.fields),
                    );
                  }}
                >
                  <ProFormList
                    name={'fields'}
                    itemRender={({ listDom, action }, { record }) => {
                      return (
                        <ProCard
                          bordered
                          extra={action}
                          title={record?.field}
                          style={{
                            marginBlockEnd: 8,
                          }}
                        >
                          {listDom}
                        </ProCard>
                      );
                    }}
                  >
                    {(_, idx, action) => <FieldItem action={action} />}
                  </ProFormList>
                </ProForm>
              </DrawerForm>
            </Collapse.Panel>
          </Collapse>
        </Tabs.TabPane>
        <Tabs.TabPane key={'2'} tabKey="2" tab="样式设置"></Tabs.TabPane>
      </Tabs>
    </>
  );
};
